<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body{margin:0; background-color:#fff}
        ul,ol,li,p,form{margin:0; padding:0}
        .box{width:200px; height:100px; border:1px solid #d4693e; border-radius:5px; margin: 100px; position:relative; background-color: #fff;}
        .a1,.a2{width:0; height:0; overflow:hidden; border-width:10px; border-style:dotted dotted solid;  position:absolute}
        .abox{position: absolute; width:20px; height: 20px; left:20px; top:-20px}/*一个相对与box绝对定位的box*/
        .a1{border-color:transparent transparent #D4693E transparent;  top:-1px}/*s上右下左边框的颜色*/
        .a2{border-color:transparent transparent #FFFFFF transparent;  top:0}
		
		/*指向左的箭头*/
		.al1,.al2{width:0; height:0; overflow:hidden; border-width:10px; border-style:dotted dotted solid;  position:absolute}
        .albox{position: absolute; width:20px; height: 20px; left:-20px; top:20px}
        .al1{border-color:transparent  #D4693E transparent transparent;  left:-1px}
        .al2{border-color:transparent  #FFFFFF transparent transparent;  left:0}
    </style>
</head>
<body>
    <div class="box"><!-- box为方框 -->
        <div class="abox"><!-- a1，a2为箭头 -->
            <div class="a1"></div><!-- 带颜色的填充箭头 -->
            <div class="a2"></div><!-- 透明覆盖 -->
        </div>
        <p style="font-size: 12px; padding: 10px;">这是一个提示框</p>
    </div>
	<!-- 箭头左指的div -->
    <div class="box"><!-- box为方框 -->
        <div class="albox"><!-- a1，a2为箭头 -->
            <div class="al1"></div><!-- 带颜色的填充箭头 -->
            <div class="al2"></div><!-- 透明覆盖 -->
        </div>
        <p style="font-size: 12px; padding: 10px;">这是一个提示框</p>
    </div>
    <div class="al1"></div><!-- 带颜色的填充箭头 -->
</body>
</html>
